<!DOCTYPE html>
<html lang="en">
    <head>
        <title>页面detroy</title>
        <script src="js/vue.js"></script>
    </head>
    <body>
        <div id="app">
            {{message}}
        </div>
        <script>
            var vm = new Vue({
                el: '#app',
                data: {
                    message: 'hello world!'
                },
                methods: {
                    show(){
                        console.log('执行了show方法')
                    }
                },
                beforeDestroy(){
                    console.log(`Vue实例挂载对象 el: ${this.$el}`);
                    console.log(`Vue实例的data对象：${this.$data}`);
                    console.log(`Vue实例的message 属性值： ${this.message}`);
                    console.log(`Vue实例的methods对象：${this.$options.methods}`);
                    this.show()
                },
                destroyed(){
                    console.log(`Vue实例挂载对象 el: ${this.$el}`);
                    console.log(`Vue实例的data对象：${this.$data}`);
                    console.log(`Vue实例的message 属性值： ${this.message}`);
                    console.log(`Vue实例的methods对象：${this.$options.methods}`);
                    this.show()    
                }
            })
        </script>
    </body>
</html>